{% extends 'mobile/base.html' %}
{% load cmstags murl %}

{% block css %}
    <link rel="stylesheet" href="{% static '/css/article.css' %}"/>
{% endblock %}
{% block js %}
{% endblock %}

{% block seo %}
    <title>{{ article.title }}- {{ settings.site_name }}</title>
    <meta name="keywords" content="{{ article.title }}"/>
    <meta name="description" content="{{ article.summary }}"/>

    <meta property="og:title" content="{{ article.title }}">
    <meta property="og:og:description" content="{{ article.summary }}">
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="{{ settings.site_name }}">
    <meta property="og:url" content="{% get_current_url %}">
    <meta property="og:image" content="{% get_current_host %}{{ article.cover }}">

{% endblock %}
{% block navbar %}
    <div class="breadcrumbs">
        <a href="{% get_index_url %}">首页</a>
        <a href="{% get_category_url article.category.alias %}">{{ article.category.name }}</a>
        <span>正文</span>
    </div>
{% endblock %}
{% block main %}
    <div class="content">
        <h2 class="title">{{ article.title }}</h2>
        <div class="info">
            <span class="iconfont icon-book"></span>
            <span><a href="{% get_category_url article.category.alias %}">{{ article.category.name }}</a></span>

            <span class="iconfont icon-date"></span>
            <span>{{ article.create_date }}</span>

            <span class="iconfont icon-yanjing"></span>
            <span>{{ article.hits }}</span>
        </div>
        <div class="article">
            {{ article.content|safe }}
            <div class="tags">
                {% for tag in article.tags.all %}
                    <a href="/tag/{{ tag.name }}.html">{{ tag.name }}</a>
                {% endfor %}
            </div>
        </div>

        <div class="prev-next">
            {% get_prev article.id as prev %}
            {% if prev %}
                <div class="item">
                    <span>上一篇：</span>
                    <a href="{% get_article_url prev.category__alias prev.id %}">{{ prev.title }}</a>
                </div>
            {% endif %}

            {% get_next article.id as next %}
            {% if next %}
                <div class="item">
                    <span>下一篇：</span>
                    <a href="{% get_article_url next.category__alias next.id %}">{{ next.title }}</a>
                </div>
            {% endif %}
        </div>
    </div>
    {% get_tag_random 40 as tags %}
    <div class="block">
        <div class="head-title">热门标签</div>
        <div class="tags hot-tags">
            {% for tag in tags %}
                <a href="/tag/{{ tag.name }}.html">{{ tag.name }}</a>
            {% endfor %}
        </div>
    </div>
    <!-- hot article -->
    {% get_random_article 10 as articles %}
    <div class="block">
        <div class="head-title">热门文章</div>
        {% for item in articles %}
            <a href="{% get_article_url item.category__alias item.id %}" class="item">
                <div class="cover">
                    <img src="{{ item.cover }}" onerror="this.src='/static/image/no_image.png'">
                </div>
                <div class="info">
                    <div class="title">{{ item.title }}</div>
                    <div class="summary">{{ item.summary|slice:':20' }}</div>
                    <div class="time">
                            <span class="date">
                                <span class="iconfont icon-date"></span>
                                <span>{{ item.create_date|date:'Y-m-d' }}</span>
                            </span>
                        <span class="hits">
                                <span class="iconfont icon-yanjing"></span>
                                <span>{{ item.hits }}</span>
                            </span>
                    </div>
                </div>
            </a>
        {% endfor %}
        <a class="more" href="/topic">查看更多</a>
    </div>

{% endblock %}